<template>
    <div class="productpage">
      <!-- 工作经历 -->
      <div class="title">
        <el-divider content-position="center" v-if="studentResume.jobExperience.length > 0">工作经历</el-divider>
      </div>
      <div class='experience' v-if="studentResume.jobExperience.length > 0">
        <el-timeline>
          <el-timeline-item
          v-for="(activity, index) in studentResume.jobExperience"
          placement="top"
          :key="index"
          :timestamp="(activity.begin)+'到'+(activity.end)"
          >
            <el-card>
                <h4>公司：{{activity.companyName}}，职位：{{ activity.position }}</h4>
              <p>
                  {{ activity.description }}
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <!-- 校园活动 -->
      <div class="title" v-if="studentResume.campusAction.length > 0">
        <el-divider content-position="center">校园活动</el-divider>
      </div>
      <div class='experience' v-if="studentResume.campusAction.length > 0">
        <el-timeline>
          <el-timeline-item
          v-for="(activity, index) in studentResume.campusAction"
          placement="top"
          :key="index"
          :timestamp="(activity.begin)+'到'+(activity.end)"
          >
            <el-card>
                <h4>活动名称：{{ activity.name }}</h4>
              <p>
                  {{ activity.description }}
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <!-- 项目经历 -->
      <div class="title" v-if="studentResume.projectExperience.length > 0">
        <el-divider content-position="center">项目经历</el-divider>
      </div>
      <div class='experience' v-if="studentResume.projectExperience.length > 0">
        <el-timeline>
          <el-timeline-item
          v-for="(activity, index) in studentResume.projectExperience"
          placement="top"
          :key="index"
          :timestamp="(activity.begin)+'到'+(activity.end)"
          >
            <el-card>
                <h4>项目名称：{{ activity.name }}，担任职位：{{ activity.position }}</h4>
              <p>
                  {{ activity.description }}
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <!-- 证书 -->
      <div class="title" v-if="studentResume.certificate.length > 0">
        <el-divider content-position="center">证书</el-divider>
      </div>
      <div class='experience' v-if="studentResume.certificate.length > 0">
        <el-timeline>
          <el-timeline-item
          v-for="(activity, index) in studentResume.certificate"
          placement="top"
          :key="index"
          :timestamp="(activity.time)"
          >
            <el-card>
                <h4>证书名称：{{ activity.name }}</h4>
              <p>
                  证书编号：{{ activity.number }}
              </p>
              <p>
                 颁发机构： {{ activity.issuingAuthority }}
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
  </div>
  </template>

<script>
export default {
  name: 'AboutJob',
  props: {
    studentResume: {
      type: Object
    }
  },
  data () {
    return {

    }
  },
  methods: {
    handleClose (done) {
      done()
    },
    drawerHander (index) {
      this.drawer = true
      this.currentIndex = index - 1
    }
  }
}
</script>
  <style>
    div .el-divider--horizontal{
      height: 2px;
      margin-top:100px;
      background-color: rgb(84, 92, 100);
    }
    div .el-divider__text{
      font-size: 26px;
      color: #545c64;
    }
    div .el-drawer__header{
      font-size: 20px;
      font-weight: blod;
      padding-bottom: 20px;
      border-bottom: 1px solid;
    }
    div .el-drawer{
      background-color: rgb(61, 67, 72);
      color: #ccc;
    }
    div .el-drawer__body{
      padding: 0px 20px 0px 20px;
    }
  </style>
  <style scoped>
    .productpage{
      padding: 0px 100px 0px 100px;
    }
    .productpage .project{
      display: flex;
      justify-content:space-around;
    }
    .ifns{
      width:85%;
      display: inline-block;
      outline: 1px dashed rgba(84, 92, 100, 0.1);
    }
    .experience{
      text-align: left;
    }
    .content{
      text-align: center;
      display: inline;
      position: relative;
      margin: 20px;
    }
    .content p{
      width: 95%;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }
    .hover{
      position: absolute;
      bottom: 5px;
      left: 7.5%;
      background-color: rgba(84, 92, 100, 0.3);
      height: 60px;
      width: 85%;
      line-height: 60px;
      cursor: pointer;
    }
    .hover:hover{
      background-color: rgba(84, 92, 100, 0.6);
    }
    h1{
      border:1px solid #ccc;
      height: 0px;
    }
    .title p{
      color: #8c8888;
      font-size: 15px;
      margin-top: 30px;
      margin-bottom: 20px;
    }
    .title p .el-tag{
      margin: 0px 5px;
      cursor: pointer;
    }
    .info{
      font-size: 14px;
      color: #72767b;
      line-height: 25px;
    }
  </style>
